<template>
  <div class="fullScreen">
    <div class="screenWrapper">
      <i
        :class="isScreenFull ? 'el-icon-full-screen':'el-icon-full-screen'"
        class="fullscreen"
        @click="toggleScreen">
      </i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'fullScreen',
  components: {},
  data () {
    return {
      isScreenFull: false
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // // 在钩子函数中注册一个事件 注册给window
    // 这里的代码主要作用是：当我们按ESC时不会改变this.isScreenFull的值,所以我们在生命周期函数中写个事件监听,当开启全屏或者关闭全屏的时候会触发fullscreenchange这个事件
    window.addEventListener('fullscreenchange', () => {
      // 这块得用箭头函数因为不用箭头函数的话this指向当前事件源
      // console.log(document.fullscreenElement)
      const flag = document.fullscreenElement
      // console.log(flag)
      if (!flag) {
        this.isScreenFull = false
      }
    })
  },
  methods: {
    toggleScreen () {
      // console.log(res)
      if (this.isScreenFull) {
        document.exitFullscreen()
        // this.isScreenFull = false
      } else {
        document.documentElement.requestFullscreen()
        // this.isScreenFull = true
      }
      this.isScreenFull = !this.isScreenFull // 直接在后边来个取反就好，就不用在if里赋值了
      // 这样写比较麻烦,而且得写很多,因为不同浏览器的兼容不一样，所以我们使用插件
    }
  }
}
</script>
<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  color: #1b24d5;
  font-size: 20px;
  cursor: pointer;
}
</style>
